<template>
    <div class="map-page-container">
        <el-amap :show-label="false" :center="center" :zoom="zoom" @click="clickMap" @init="initMap">
            <el-amap-mouse-tool v-if="created" :type="type" :auto-clear="true" @draw="draw" />
        </el-amap>
        <div class="toolbar">
            <button @click="changeMarker('rectangle')">
                选择范围
            </button>
        </div>
    </div>
    >
</template>

<script lang="ts" setup>

import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap';
// import VueAMapLoca from '@vuemap/vue-amap-loca';
// import VueAMapExtra from '@vuemap/vue-amap-extra';
import '@vuemap/vue-amap/dist/style.css'
initAMapApiLoader({
    key: '02b8a58dd442fcac764dda6c2cb6b318	',
    securityJsCode: '02722e1e4ee140d8d212b1ff72b6bf92', // 新版key需要配合安全密钥使用
    //Loca:{
    //  version: '2.0.0'
    //} // 如果需要使用loca组件库，需要加载Loca
})

import { ref } from "vue";
import { ElAmap, ElAmapMouseTool } from "@vuemap/vue-amap";

const center = ref([121.5273285, 31.21515044]);
const zoom = ref(16);
const type = ref('marker');
const created = ref(true);

const clickMap = (e: any) => {
    console.log('click map: ', e);
}
const initMap = (map: any) => {
    console.log('init map: ', map);
}
const draw = (e: any, target: any) => {
    console.log('绘制完成 : ', e, target)
}
const changeMarker = (newType: string) => {
    type.value = newType;
}

</script>

<style scoped>
.map-page-container {
    height: 500px;
    width: 100%;
}
</style>